<template>
	<view class="container">
		<view class="content">
			<view class="search">
				<uv-search placeholder="请输入法人手机号" showAction="true" v-model="Search.certifPhone"
					@custom="changeSearch"></uv-search>
			</view>
		</view>
		<view class="merchantList">
			<view class="merchan">
				<title>商户列表</title>
			</view>
			<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
				@scrolltoupper="upper" lower-threshold="112">
				<view class="ArrList">
					<view class="List" v-for="(item,index) in fenecList" :key="index">
						<view class="merchan-data" @click="listData(item,index)">
							<view class="imgData">
								<img style="max-width: 100rpx;max-height: 100rpx;" src="../../static/ListEndPoints.png"
									alt="" />
							</view>
							<view class="text">
								<title style="margin-top: 35rpx;font-size: 30rpx;color: #242f66;">
									{{item.merName || item.mchntName}}
								</title>
								<title style="margin-top: 20rpx;font-size: 25rpx;">{{item.merNo|| item.acqMerNo}}
								</title>
							</view>
						</view>
						<view class="merchan-data-1">
							<uv-line color="#eceef2"></uv-line>
						</view>
						<view class="merchan-data-2">
							<title style="font-size: 30rpx;color: #242f66;margin-left: 50rpx;" v-if="bound == 1">绑定商户
							</title>
							<title style="font-size: 30rpx;color: #242f66;margin-left: 50rpx;" v-if="bound == 0">已绑定商户
							</title>
							<view style="font-size: 25rpx;margin-right: 50rpx;">
								<uv-button type="primary" size="small" text="绑定" v-if="bound == 1 "
									@click="asyncChange(item)"></uv-button>
								<uv-button type="primary" size="small" text="进入" v-if="bound == 0 "
									@click="enterChange(item)"></uv-button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="信息校验" @confirm="confirm" @close="close">
				<uv-form labelPosition="left" :model="model1" ref="form">
					<uv-form-item label="法人手机号" prop="phone" borderBottom label-width="100px">
						<uv-input v-model="model1.phone" placeholder="请输入手机号" border="none">
						</uv-input>
					</uv-form-item>
					<view class="index">
						<view class="content1">
							<!-- 输入框 -->
							<view class="phone-item" style="">
								<!-- 手机号输入框 -->
								<view style="width: 75%;">
									<uv-form-item label="验证码" prop="code" borderBottom label-width="100px">
										<uv-input v-model="code" placeholder="请输入验证码" border="none">
										</uv-input>
									</uv-form-item>
								</view>
								<!-- 发送验证码按钮 -->
								<view class="get-code" @click="getCode"
									v-if="codeBtn.isCode || codeBtn.codeNumber == 0">
									{{codeBtn.codeName}}
								</view>
								<view class="get-code" v-else>{{codeBtn.codeNumber}}s</view>
							</view>
						</view>
					</view>
				</uv-form>
			</uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mchUser
	} from "../../network/merchant.js"
	import {
		send,
		checkVerCode,
		queryList,
		userBindMch
	} from '@/network/login.js';
	import tabBar from '@/utils/tabbar.js'
	export default {
		data() {
			return {
				query: {
					page: 1,
					pageSize: 10000
				},
				Search: {
					certifPhone: ""
				},
				params: {
					page: 1,
					pageSize: 10,
				},
				total: 0,
				list: 1,
				fenecList: [],
				value: false,
				timer: null, // 定时器
				codeBtn: { // 按钮状态切换
					codeName: '获取验证码', // 状态名称
					codeNumber: 60, // 倒计时秒数
					isCode: true // 是否获取验证码
				},
				code: "", // 验证码字段
				focus: false, // input是否聚焦
				model1: {
					phone: ""
				},
				model2: {},
				informationData: {},
				bound: ""

			}
		},
		onLoad(e) {
			this.bound = e.bound
			this.merchantList()
		},
		watch: {
			// 监听倒计时
			'codeBtn.codeNumber': {
				handler(val) {
					// 这里监听用户输入完完整的验证码，去调接口验证。
					if (val == 0) {
						this.codeBtn.codeName = '重新获取'
						clearInterval(this.timer)
					}
				}
			}
		},
		methods: {
			onPullDownRefresh1() {
				this.params.page = 1;
				if (this.list != 1) {
					this.merchantListSearch()
				} else {
					this.merchantList()
				}
			},
			onReachBottom1() {
				if (this.params.page * this.params.pageSize < this.total) {
					this.params.page = this.params.page + 1
					if (this.list != 1) {
						this.merchantListSearch()
					} else {
						this.merchantList()
					}
				}
			},
			// 获取验证码
			getCode() {
				this.codeBtn.isCode = false
				this.codeBtn.codeNumber = 60
				this.CAPTCHA()
				this.timer = setInterval(() => {
					if (this.codeBtn.codeNumber == 0) {
						clearInterval(this.timer)
						return
					}
					this.codeBtn.codeNumber--
				}, 1000)
			},
			// 点击聚焦输入框
			focusClick() {
				this.focus = true
			},
			// 输入框失去焦点
			inputCodeBlur(e) {
				let value = e.detail.value
				this.focus = false
			},
			// 输入框聚焦时触发（没用到）
			inputFocus(e, height) {
				console.log(e)
			},
			// 输入框内容变化事件
			inputCode(e) {
				let value = e.detail.value
				this.code = value
			},
			changeSearch() {
				if (this.Search.certifPhone != "") {
					this.bound = 1
					uni.setStorageSync('searchlinkPhone', this.Search.certifPhone);
					this.fenecList = []
					this.list = 2
					this.merchantListSearch()
				}
			},
			merchantList() {
				mchUser(this.params, this.query).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						if (this.params.page === 1) {
							this.fenecList = res.data.data.rows
						} else {
							this.fenecList = this.fenecList.concat(res.data.data.rows)
						}
						this.total = res.data.data.total
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			},
			merchantListSearch() {
				queryList(this.params, this.Search).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						if (this.params.page === 1) {
							this.fenecList = res.data.data
						} else {
							this.fenecList = this.fenecList.concat(res.data.data)
						}
						this.total = res.data.data.total
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			asyncChange(e) {
				this.model1.phone = uni.getStorageSync('searchlinkPhone')
				this.model2.acqMerNo = e.acqMerNo
				this.$refs.inputDialog.open()
			},
			CAPTCHA() {
				var arr = {
					phone: this.model1.phone,
					type: "1"
				}
				if (this.model1.phone != "") {
					send(arr).then(res => {
						console.log(res)
						const code = res.data.code;
						if (code == "000000") {
							uni.showToast({
								title: "发送成功",
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			confirm() {
				var arr = {
					phone: this.model1.phone,
					verCode: this.code
				}
				checkVerCode(arr).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						uni.showToast({
							title: "验证成功",
							icon: 'success',
							duration: 2000
						})
						this.bind()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			close() {},
			information() {

			},
			bind() {
				var arr = {
					acqMerNo: this.model2.acqMerNo
				}
				userBindMch(arr).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						uni.showToast({
							title: "绑定成功",
							icon: 'success',
							duration: 2000
						})
						wx.navigateTo({
							url: '/pages_subPack/merchant/BindingSuccessful'
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
						wx.navigateTo({
							url: '/pages_subPack/merchant/BindingFailed'
						})
					}
				})
			},
			enterChange(item) {
				console.log(item)
				uni.setStorageSync('listData', item);
				this.$store.dispatch('changeTabbar', tabBar.tab1)
				wx.switchTab({
					url: '/pages/Home/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.content {
		width: 90%;
	}

	.search {
		margin-top: 20rpx;
		height: 150rpx;
	}

	/deep/.uv-search {
		height: 100rpx !important;
		background: #EFEFEF !important;
		border-radius: 11px !important;
		border: 1px solid #031A6E;
	}

	.merchantList {
		background: #f4f4f4;
		height: 100%;
		width: 100%;
	}

	.merchan {
		margin: 5% 0% 0% 5%;
		font-weight: bold;
		color: #242f66;
	}

	.ArrList {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.List {
		background: #fff;
		height: 320rpx;
		width: 85%;
		border-radius: 20rpx;
		margin-top: 5%;
	}

	.merchan-data {
		display: flex;
	}

	.imgData {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background: #179bd7;
		margin: 30rpx;
	}

	.image {
		max-width: 100rpx;
		max-height: 100rpx;
	}

	.text {
		display: flex;
		flex-flow: column;
	}

	.merchan-data-1 {
		display: flex;
		justify-content: center;
	}

	/deep/.uv-line {
		width: 90% !important;
	}

	.merchan-data-2 {
		margin-top: 8%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.index {
		.content1 {
			width: 100%;

			.phone-item {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 30rpx;

				.phone-input {
					width: calc(100% - 240rpx);
					padding: 16rpx;
					border-bottom: 1rpx solid #15d3fe;
				}

				.get-code {
					text-align: center;
					width: 170rpx;
					font-size: 26rpx;
					border-radius: 50rpx;
					padding: 10rpx 0rpx;
					background: #3c9cff;
					color: #fff;
				}
			}

			.input-list {
				display: flex;
				/* 水平居中 */
				justify-content: center;
				/* 垂直居中 */
				align-items: center;

				.input-item {
					width: 0rpx;
				}

				.code-list {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.code-item {
						width: 90rpx;
						height: 90rpx;
						text-align: center;
						line-height: 90rpx;
						border: 1rpx solid #58dffe;
						border-radius: 10rpx;
						font-size: 50rpx;
						color: #00bfff;
						background: #ecfafb;
					}
				}
			}
		}
	}

	.uv-input:focus {
		border: 2px solid #4A90E2;
		background: #4A90E2;
		/* 修改为蓝色边框 */
		outline: none;
		/* 去除默认的轮廓线 */
	}
</style>